<template>
  <div class="wrap">
    <CHeader content="变更管理" ref="head"/>
    <div class="box">
      <div
        class="bodyContainer"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <div class="bodyTop">
          <el-form
            ref="form"
            :model="filter"
            inline
          >
            <!-- medium / small / mini -->
            <el-form-item size="small">
              <Select2el v-model="filter.region"  placeholder="县区选择" filterable>
                <el-option
                  v-for="item in regionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </Select2el>
            </el-form-item>
            <el-form-item size="small">
              <Select2el v-model="filter.changeType"  placeholder="变更类型选择" filterable>
                <el-option
                  v-for="item in changeTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </Select2el>
            </el-form-item>
            <el-form-item size="small" label="时间段：">
              <el-date-picker
                v-model="filter.period"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item size="small" label="企业名称：">
              <el-input
                v-model="filter.companyName"
                placeholder="请输入企业名称"
                clearable
              />
            </el-form-item>
            <el-form-item size="small">
              <el-button type="primary" icon="el-icon-search" @click.stop="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="tableContainer">
          <div class="tableTool">
            <div class="total">合计：<span>{{pageOption.total}}</span></div>
            <el-button type="primary" @click.stop="exportExcel">导出</el-button>
          </div>
          <CardTable
            :showHeader="false"
            :data="tableData"
            :pageOption.sync="pageOption"
            @sizeChange="sizeChange"
            @currentChange="currentChange"
            :height="maxHeight"
          >
            <!-- 序号 所属县区 企业名称 变更类型 变更内容 申请日期 审批日期 审批人 -->
            <el-table-column prop="id" label="序号" align="center" width="80" />
            <el-table-column prop="region" label="所属县区" align="center" width="160" />
            <el-table-column prop="companyName" label="企业名称" align="center" />
            <el-table-column prop="changeType"  label="变更类型" align="center" width="100" />
            <el-table-column prop="changeContent" label="变更内容" align="center" />
            <el-table-column prop="applicationDate"  label="申请日期" align="center" width="160" />
            <el-table-column prop="approvalDate"  label="申请日期" align="center" width="160" />
            <el-table-column prop="approver"  label="审批人" align="center" width="100" />
          </CardTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CHeader from "@/components/Cheader/Cheader";
import CardTable from "@/components/cardTable/cardTable";
import Select2el from "@/components/select2el/select2el";
import * as browser from "@/utils/browser";
const {IEVersion,resizeObserver} = browser.default;
/**
 * 注：el-date-picker 在当前项目中使用的是 element-ui 的 2.15.2 版本会有警告，不影响正常功能
 * Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement"
 */
export default {
  name: "bggl",
  components: {
    CHeader,
    CardTable,
    Select2el,
  },
  data () {
    return {
      loading: true,
      maxHeight: '100%',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      regionArray: [
        // 盐化新区 洪泽区 盱眙县 涟水县 金湖县 淮阴区 清江浦区
        { name: "盐化新区", label: "yxxq" },
        { name: "洪泽区", label: "hzq" },
        { name: "盱眙县", label: "xyx" },
        { name: "涟水县", label: "lsx" },
        { name: "金湖县", label: "jhx" },
        { name: "淮阴区", label: "hyq" },
        { name: "清江浦区", label: "qjpq" },
      ],
      changeTypeOptions:[
        // 人员 设备 工艺
        { label: "人员", value: "ry" },
        { label: "设备", value: "sb" },
        { label: "工艺", value: "gy" },
      ],
      // 过滤器
      filter: {
        // 区域
        region: "",
        // 变更类型
        changeType: "",
        // 企业名称
        companyName: "",
        // 时间段
        period: [],
      },
      pageOption: {
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 1000],
        layout: "sizes, total, prev, pager, next, jumper",
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      result: {},
      tableData: [],
      value: "",
    }
  },
  computed: {
    regionOptions () {
      return this.regionArray.map(item => {
        return {
          value: item.label,
          label: item.name
        }
      })
    }
  },
  methods: {
    setHeight(){
      this.$el && this.$nextTick(() => {
        let mainHeight =  window.innerHeight - document.querySelector('.header-container').offsetHeight,
          header = this.$refs.head ? this.$refs.head.$el : null,
          bodyTop = this.$el.querySelector('.bodyTop'),
          tableTool = this.$el.querySelector('.tableTool'),
          paddingTop = 20,
          height = mainHeight - paddingTop;
        if(header){
          height -= header.offsetHeight;
        }
        if(bodyTop){
          height -= bodyTop.offsetHeight ;
        }
        if(tableTool){
          height -= tableTool.offsetHeight;
        }
        this.maxHeight = height + 'px';
      })
    },
    exportExcel(){
      this.$message.info('暂未开放');
    },
    onSubmit(){
      /**
       * 查询的时候重置页码
       * this.filter 为查询条件
       * this.pageOption 为分页条件
       * this.tableData 为表格数据
       * this.pageOption.currentPage 当前页码
       * this.pageOption.total 为总条数
       */
      console.log(this.filter,this.pageOption)
    },
    initFilter () {
      Object.keys(this.filter).forEach(key => {
        if (this.$route.query[key]) {
          this.filter[key] = this.$route.query[key]
        }
      });
    },
    init () {
      this.loading = true;
      setTimeout(() => {

        this.getTableData(true);
        this.loading = false;
      }, 1000);
    },
    getTableData (retry = false) {
      this.tableData = [];
      setTimeout(() => {
        let i = this.pageOption.currentPage == 1 ? this.pageOption.currentPage : 1 + (this.pageOption.pageSize * (this.pageOption.currentPage - 1));
        this.tableData = [
          {
            // 序号 所属县区 企业名称 变更类型 变更内容 申请日期 审批日期 审批人
            id: i,
            region: "盐化新区",
            companyName: "盐化新区",
            changeType: "人员",
            changeContent: "安全总监岗调整变更",
            applicationDate: "2022.4.3",
            approvalDate: "2022.4.3",
            approver:"杨林",
          },
        ];
        if (retry) {
          this.pageOption.currentPage = 1;
          this.pageOption.total = Math.floor(Math.random() * 1000);
        }
        let tempCount = this.pageOption.pageSize - this.tableData.length;
        for (
          let index = this.tableData.length;
          index < tempCount;
          index++
        ) {
          let item = {
            id: i + index + 1,
            region: "盐化新区",
            companyName: "盐化新区",
            changeType: "人员",
            changeContent: "安全总监岗调整变更",
            applicationDate: "2022.4.3",
            approvalDate: "2022.4.3",
            approver:"杨林",
          };
          this.tableData.push(item);
        }
      }, 1000);
    },
    sizeChange (val) {
      this.pageOption.pageSize = val;
      this.getTableData();
    },
    currentChange (val) {
      this.pageOption.currentPage = val;
      this.getTableData();
    },
  },
  resizeMain:null,
  mounted () {
    Object.keys(this.$route.query).length > 0 && this.initFilter();
    this.init();
      if(IEVersion() == -1){
        resizeObserver(this.$el,()=>{
          this.setHeight();
        },this.resizeMain);
      }
  },
  destroyed(){
    if(IEVersion() == -1){
      this.resizeMain && this.resizeMain.disconnect();
    }
  }
};
</script>

<style scoped lang="scss">
.wrap {
  width: 100%;
  min-height: 100%;
  text-align: left;
  background-color: rgb(243, 245, 251);
  .header_wrap {
    background-color: #fff;
    border-bottom: 1px solid #e0eaf5;
  }
  .box {
    padding: 20px 0 0;
    max-width: 100%;
    .el-radio-group {
      padding: 0 20px;
    }
    :deep .el-radio-button {
      .el-radio-button__inner {
        max-height: 36px;
        padding: 6px 20px;
        line-height: 24px;
        font-size: 16px;
        font-weight: 400;
      }
      &.is-active .el-radio-button__inner {
        background-color: #5184ea;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          bottom: -10px;
          left: 50%;
          border-top: 5px solid #5184ea;
          border-left: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-right: 5px solid transparent;
        }
      }
    }
    .bodyContainer {
      min-height: 30vh;
      background: #fdffff;
      .bodyTop {
        padding: 0 32px;
        min-height: 74px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #E0EAF5;
        .el-form-item {
          margin-bottom: 0;
          .el-form-item__label {
            font-size: 16px;
            font-weight: 400;
            color: #333;
          }
          .el-form-item__content {
            width: 220px;
            font-size: 16px;
            font-weight: 400;
            color: #333;
            /*对齐方式为居中*/
            vertical-align: middle;
          }
        }
      }
      .tableTool {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px;
      }
      .tableContainer {
        padding: 0 32px;
      }
    }

    :deep .bodyContainer {
      .bodyTop{
        .el-form{
          .el-form-item{
            .el-form-item__content{
              vertical-align: middle;
            }
          }
        }
        .el-button--primary {
          width: 82px;
          height: 32px;
          line-height: 32px;
          background: linear-gradient(90deg, #5177e4 0%, #5186eb 100%);
          box-shadow: 0 2px 4px 0 rgba(81, 133, 235, 0.5);
          border-radius: 4px;
          padding: 0 20px;
        }
      }
      .el-table__header-wrapper {
        max-height: 46px;
        thead .el-table__cell {
          max-height: 22px;
          line-height: 22px;
          background: #f0f4f9;
        }
      }
      .tableTool .el-button--primary {
        width: 82px;
        height: 32px;
        line-height: 32px;
        background: linear-gradient(90deg, #5177e4 0%, #5186eb 100%);
        box-shadow: 0 2px 4px 0 rgba(81, 133, 235, 0.5);
        border-radius: 4px;
        padding: 0 20px;
      }
    }
  }
}
.flex{
  display: flex;
}
.center{
  justify-content: center;
  align-items: center;
}
.flex {
  >*{
    vertical-align: middle;
  }
  span {
    margin: 0 4px;
  }
  .tips{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    text-decoration: underline;
    color: #4D7EE9;
  }
  i{
    color: #4D7EE9;
  }
}
.red{
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #F83A3A;
}
</style>